<template>
	<view>
		<u-gap></u-gap>
		<!-- 查 -->
		<view class="Subsection margin  " style="display: flex;justify-content: space-between; ">
			<!-- 单选 -->
			<view class="u-page__tag-item" v-for="(item, index) in radios" :key="index">
				<!-- 				<u-tag :text="item.name" borderColor='#DDDDDD' color='#fff' :plain="!item.checked" :name="index"
					@click="radioClick(index, item.name)">
				</u-tag> -->
				<u-tag :text="item.name" :plain="!item.checked" size="large" :name="index"
					@click="radioClick(index, item.name)"></u-tag>
			</view>
		</view>
		<u-gap></u-gap>
		<!-- distance -->
		<view class="margin">
			<view class="list flex justif-between">
				<view :class="val.id === i ? 'text-red' : ''" @click="disHandle(val, i, dis)" v-for="val, i in dis"
					:key="i">
					{{ val.text }} <text v-if="i != 0">m</text>
				</view>
			</view>
		</view>

		<u-gap></u-gap>
		<!-- 搜索 -->
		<view class="margin search_ss" style="margin-top: 1rpx;">
			<!-- search -->
			<u-search @search="searchHandle" :showAction="false" :placeholder="search_pl" v-model="search_wz"
				:clearabled="true" searchIconColor="#7976E9" borderColor="#DDDDDD" bgColor="#ffffff"></u-search>
		</view>
		<u-gap></u-gap>

		<view class="tab1">
			<view class="margin ms20" style="display: none;">
				<view style="overflow: hidden;">
					<view class="item flex-cen" style="float: left; margin-right: 190rpx;">
						<text style="margin-right: 19rpx;">区域</text>
						<image src="/static/img/finddoctor/01-xia.png" alt="" style="width: 18rpx;height: 12rpx;" />
					</view>
					<view class="item flex-cen" style="float: left;margin-right: 200rpx;">
						<text style="margin-right: 19rpx;">排序</text>
						<image src="/static/img/finddoctor/01-xia.png" alt="" style="width: 18rpx;height: 12rpx;" />
					</view>
					<view class="item flex-cen" style="float: left;">
						<text style="margin-right: 19rpx;">筛选</text>
						<image src="/static/img/finddoctor/01-xia.png" alt="" style="width: 18rpx;height: 12rpx;" />
					</view>
				</view>
			</view>

			<view>
				<u-popup :show="show" closeable mode="center" @close="close">
					<view class="bg-white" style="width: 600rpx;">
						<u-gap height="30"></u-gap>
						<view class="item1 mt10 justify-center" style="display: flex;">
							<view>
								<image :src="thisHos.staffpic" style="height: 120px; width: 100px;"></image>
								<text style="text-align: center;display: block;">{{ thisHos.uname }}</text>
							</view>
						</view>
						<u-gap height="20"></u-gap>
						<view class="flex flex-col  px-1 " style="display: flex;border: 1rpx dotted gray ;">
							<u-cell>
								<view slot="title" class="u-slot-title">
									<text class="u-cell-text pr-2 color_09f">医院</text>
									<text class="u-cell-text pl-20">{{ thisHos.ucompname }}</text>
								</view>
							</u-cell>

							<u-cell>
								<view slot="title" class="u-slot-title">
									<view class="u-cell-text pr-2 color_09f">资格资格证书编码</view>
									<view class="u-cell-text ">{{ thisHos.qualificationcode }}</view>
								</view>
							</u-cell>


							<u-cell>
								<view slot="title" class="u-slot-title">
									<view class="u-cell-text pr-2 color_09f">执业证书编码</view>
									<view class="u-cell-text ">{{ thisHos.practicecode }}</view>
								</view>
							</u-cell>

							<u-cell>
								<view slot="title" class="u-slot-title">
									<text class="u-cell-text pr-2 color_09f">2019-2020年度定期考核</text>
									<text class="u-cell-text pl-20">通过</text>
								</view>
							</u-cell>

							<u-cell>
								<view slot="title" class="u-slot-title">
									<text class="u-cell-text pr-2 color_09f">执业类型</text>
									<text class="u-cell-text pl-20">{{ thisHos.deptname }}</text>
								</view>
							</u-cell>

							<u-cell>
								<view slot="title" class="u-slot-title ">
									<text class="u-cell-text pr-2 color_09f">执业范围</text>
									<text class="u-cell-text pl-20">{{ thisHos.businesstype }}</text>
								</view>
							</u-cell>
						</view>

						<view class="flex flex-center px-10 py-20">
							<u-button class="color_black" type="success" v-if="showBtn" @click="go(thisHos)"
								text="进入云诊室"></u-button>
							<u-button class="color_black" type="primary" @click="close" text="关闭"></u-button>
						</view>
					</view>


				</u-popup>
			</view>

			<!-- 医生列表 -->
			<!-- 			<view class="margin" v-for="(val, i) in doctorList" :key="i" @click="showTc(val)">
				<view class="item1 u-border-bottom mt10" style="display: flex;">
					<view class="mr10 ">
						<image :src="val.uheadPic" alt="" style="width:108rpx;height: 108rpx;border-radius: 50%;"/>
					</view>
					<view class="" style="width: 100%;">
						<u-row :gutter='5'>
							<u-col span="3">
								<view class="demo-layout bg-purple-light">
									<view class="size_16 font_b">{{ val.uname }}</view>
								</view>
							</u-col>
							<u-col span="9">
								<view class="demo-layout bg-purple">
									<view class="size_14">{{ val.utechp }}</view>
								</view>
							</u-col>
						</u-row>
						<u-row class="mt8 ms10">
							<u-col span="8">
								<view class="demo-layout bg-purple-light">
									<view class="size_14 ">{{ val.ucompname }}</view>
								</view>
							</u-col>
							<u-col span="4">
								<view class="demo-layout bg-purple">
									<view class="size_14">{{ val.udepartmentname }}</view>
								</view>
							</u-col>
						</u-row>
						<view class="size_12 color_84 ms20">{{ val.introduction }}</view>
					</view>
				</view>
			</view> -->


			<view class="margin" v-for="(val, i) in doctorList" :key="i" @click="showTc(val)">
				<view class="item1 u-border-bottom mt10 " style="display: flex">
					<view class="mr20">
						<u-avatar size="50" :src="val.staffpic || '/static/img/finddoctor/02-yishen.png'"></u-avatar>
					</view>
					<view class="" style="width: 100%">
						<u-row :gutter="5">
							<u-col span="3">
								<view class="demo-layout bg-purple-light">
									<view class="size_16 font_b">{{
			              val.uname || "默认用户"
			            }}</view>
								</view>
							</u-col>
						</u-row>
						<u-gap height="10"></u-gap>
						<u-row :gutter="5">
							<u-col span="9">
								<view class="demo-layout bg-purple">
									<view class="size_14">{{
						        val.titleName || "副主任医师"
						      }}</view>
								</view>
							</u-col>
						</u-row>
						<u-row class="mt8 ms10">
							<u-col span="12">
								<view class="demo-layout bg-purple">
									<view class="size_14">{{
							      val.deptname || "外科"
							    }}</view>
								</view>
							</u-col>
						</u-row>
						<u-row class="mt8 ms10">
							<u-col span="8">
								<view class="demo-layout bg-purple">
									<view class="size_14">{{
							      val.businesstype || "业务"
							    }}</view>
								</view>
							</u-col>
						</u-row>
						<u-row class="mt8 ms10">
							<u-col span="8">
								<view class="demo-layout bg-purple-light">
									<view class="size_14">{{
						        val.ucompname || "北京第一人民医院"
						      }}</view>
								</view>
							</u-col>
						</u-row>

						<!-- <view class="size_12 color_84 ms20">{{val.introduction ||  '经验丰富'}}</view> -->
					</view>
				</view>
			</view>


			<view class="mt10 mb20">
				<u-loadmore :status="status" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				showBtn: false,
				thisHos: [],
				mapData: {
					"type": "2",
					"userId": uni.getStorageSync('userInfo').userid,
					"x": uni.getStorageSync('map').x,
					"y": uni.getStorageSync('userInfo').y,
				},
				search_wz: '',
				search_pl: '按医院查',
				/* 单选标签 */
				radios: [{
						name: "按医院查",
						checked: true
					},
					{
						name: "按姓名查",
						checked: false
					},
					{
						name: "按科室查",
						checked: false
					}
				],
				// 距离
				dis: [{
						text: '不限范围',
						id: 0
					},
					{
						text: '1000',
						id: 0
					},
					{
						text: '3000',
						id: 0
					},
					{
						text: '5000',
						id: 0
					},
					{
						text: '10000',
						id: 0
					}
				],
				status: 'nomore',
				// 医生
				doctorList: [],
				/* 搜索 */
				// "compName": "",
				// "employeeName": "",
				// "udepartmentname": "",
				// "distance": 0,
				// "x": 0,
				// "y": 0
				form: {},
				searchStatus: 0,
			};
		},
		onLoad() {
			this.getList()
			this.getGps()
		},
		onShow() {

		},
		mounted() {

		},
		destroyed() {

		},
		onHide() {

		},
		methods: {
			async getMap() {
				let that = this
				let re = await this.$API.mapApi.coordinate(this.mapData);
			},
			go(val) {
				this.$pub.go(`/pages_home/createOrder/createOrder?data=${encodeURIComponent(JSON.stringify(val))}`)
			},
			// TODO 
			close() {
				this.show = false
			},
			showTc(val) {
				this.show = true;
				this.thisHos = val;
				console.log(this.thisHos);
				switch (val.applyStatus) {
					case "0":
						this.showBtn = false;
						break;
					case "1":
						this.showBtn = true;
						break;
				}
			},
			getGps(e) {
				let that = this
				uni.getLocation({
					type: 'wgs84',
					/* high */
					accuracy: 'best',
					isHighAccuracy: true,
					highAccuracyExpireTime: 3000,
					success: function(res) {
						let map = {
							x: res.longitude,
							y: res.latitude
						};
						that.mapData.x = res.longitude
						that.mapData.y = res.latitude
						uni.setStorageSync('map', map)
						that.getMap()
					},
					fail: function(err) {
						// console.log(err, "err");
						//失败调用
						// #ifdef APP
						checkOpenGPSServiceByAndroid()
						// #endif
					}
				})
			},
			/*  */
			disHandle(item, index, list) {
				/* 变色 */
				this.dis = list.map((m) => {
					m.id = index
					return m
				})
				console.log(item, "item");
				console.log(index, "index");
				console.log(list, "list");

				/*  */
				this.form.distance = Number(item.text)
				this.form.x = uni.getStorageInfoSync('map').x
				this.form.y = uni.getStorageInfoSync('map').y

				console.log(this.form, "this.form");

				/*  */
				this.getList(this.form)
			},
			searchHandle(e) {
				/* content */
				console.log(e, 'e');
				/* 状态 */
				let status = this.searchStatus
				switch (status) {
					case 0:
						this.form.compName = e
						break;
					case 1:
						this.form.employeeName = e
						break;
					case 2:
						this.form.udepartmentname = e
						break;
					default:
						break;
				}
				/* 请求 */
				this.getList(this.form)
				this.form.compName = '';
				this.form.employeeName = ''
				this.form.udepartmentname = ''
			},
			async getList(data = {}) {
				let re = await this.$API.doctorApi.inquiry(data)
				this.doctorList = re
			},
			/*  */
			radioClick(e, name) {
				/* 判断搜索状态 */
				this.searchStatus = e
				this.radios.map((item, index) => {
					item.checked = index === e ? true : false
				})
				this.search_pl = name
			},
		},
	}
</script>

<style lang="scss" scoped>
	/* #ifdef MP */
	::v-deep .u-search__content__input {
		font-size: 28rpx !important;
	}

	/* #endif */
	.color_black {
		color: black;
	}

	.u-cell-text {
		font-size: 30rpx;
	}

	/* 更改tag切换颜色 */
	// ::v-deep .u-tag--primary {
	// 	background-color: #7976E9;
	// 	border-color: #7976E9;
	// }

	// ::v-deep .u-tag--primary span {
	// 	color: #FFFFFF;
	// 	font-size: 26rpx !important;
	// }

	.u-page__tag-item {

		// margin-right: 40rpx;

	}

	::v-deep .u-tag--large {
		font-size: 26rpx;
		height: 50rpx;
		line-height: 50rpx;
	}

	::v-deep .u-tag__text--large {
		font-size: 26rpx;
	}

	.search_ss {
		::v-deep .u-search__content__input {
			font-size: 28rpx !important;
		}
	}
	::v-deep .u-loadmore__content__text{
		margin-bottom:20rpx
	}
	::v-deep .u-tag--primary {
		background-color: #7976E9;
		border-color: #7976E9;
	
	}
	::v-deep .u-tag--square{
		border-radius: 6rpx;
	}
</style>